<template>
  <div class="all-con">
    <div class="left">
      <Weather />
      <WeatherData ref="weatherDialog" />
      <Agritask ref="agriTaskDialog" :batch-no="batchNo" />
    </div>
    <div class="middle">
      <div class="header-title">{{ varietyName }}保育模型</div>
      <div class="tabs-box">
        <li
          v-for="(item, index) in tabList"
          :key="index"
          class="tabs"
          :class="item === activeTab ? 'tabActive' : ''"
          @click="selectTabs(item)"
        >
          {{ item }}
        </li>
      </div>
      <div class="growth-model">
        <MiddleAll
          v-if="activeTab === '生长模型'"
          ref="middleAll"
          :now-phase-id="nowPhaseNo"
          :growth-phase-list="growthPhaseList"
          @selectGrowthId="selectGrowthId"
        />
        <MiddleNow
          v-if="activeTab === '当前状况'"
          ref="middleNow"
          :now-growth-phase-object="nowGrowthPhaseObject"
          :variety-no="varietyNo"
          :batch-no="batchNo"
        />
      </div>
      <Step :batch-no="batchNo" :now-day="nowDay" :now-phase-no="nowPhaseNo" />
      <div class="bacth-info">
        <el-select
          v-model="batchNo"
          placeholder="请选择批次"
          @change="changeBatch"
        >
          <el-option
            v-for="item in batchList"
            :key="item.batchNo"
            :label="item.batchName"
            :value="item.batchNo"
          />
        </el-select>
        <p>当前生长批次：{{ batchInfo.batchNo }}</p>
        <p>种养品种：{{ batchInfo.varietyName }}</p>
        <p v-if="batchInfo.lesseeName">种养人：{{ batchInfo.lesseeName }}</p>
        <p>开始生长时间：{{ batchInfo.assetDate }}</p>
      </div>
    </div>
    <div class="right">
      <Alarm
        ref="alarmDialog"
        :batch-id="batchNo"
        :growth-phase-id="growthPhaseNo"
      />
      <Dataitem
        ref="dataItemDialog"
        :batch-id="batchNo"
        :growth-phase-id="growthPhaseNo"
      />
      <Growthpic
        ref="growthPictureDialog"
        :batch-id="batchNo"
        :growth-phase-id="growthPhaseNo"
        :variety-no="varietyNo"
      />
    </div>
  </div>
</template>

<script>
import Dataitem from "./components/dataitem";
import Growthpic from "./components/growthpic";
import Agritask from "./components/agritask";
import WeatherData from "./components/weatherdata";
import Weather from "./components/weather";
// import Middle from "./components/middle";
import Alarm from "./components/alarm";
import Step from "./components/step";
import MiddleAll from "./components/middle-all";
import MiddleNow from "./components/middle-now";
// import ModelDialog from "./components/components/model-dialog";
import nowpagereq from "@/api/digital-production/production-batch-manage/create-production-batch";
import configurationApi from "@/api/digital-production/conservation-model/configuration/index";
// import alarmConfigApi from "@/api/digital-production/conservation-model/alarm-config";
import nowpagereq1 from "@/api/digital-production/material-link-monitoring/meteorological-monitoring/index";

export default {
  // eslint-disable-next-line vue/name-property-casing
  name: "crop-model-config",
  components: {
    Dataitem,
    Growthpic,
    WeatherData,
    Weather,
    Agritask,
    // Middle,
    Alarm,
    Step,
    MiddleAll,
    MiddleNow
  },
  data() {
    return {
      taskList: [],
      weatherList: [],
      alarmList: [],
      activeTab: "生长模型",
      tabList: ["生长模型", "当前状况"],
      batchList: [],
      batchNo: "",
      batchInfo: {},
      showModelDialog: false,
      modelList: [], // 批次绑定模板的时候选择的数组
      growthPhaseNo: "",
      growthPhaseList: [], // 该批次完整的生长周期
      nowGrowthPhaseObject: {}, // 该批次当前的生长周期
      varietyName: "", // 标题
      varietyNo: "", // 种养类型
      nowPhaseNo: "",
      weatherstation: [],
      nowDay: 0
    };
  },
  created() {
    this.getotherweatherstation();
    this.queryBatch();
  },
  mounted() {},
  methods: {
    // 获取数据项
    getotherweatherstation() {
      nowpagereq1.getweatherdataleft().then((res) => {
        this.weatherstation = res.data || [];
        this.weatherstation = this.weatherstation.map((key) => {
          if (key && key.enumListType) {
            let enumarr = key.enumListType.split(";");
            // 删除最后一个空数组
            // enumarr.pop();
            let newenumarr = [];
            enumarr.forEach((enumtwoitem) => {
              let ss = enumtwoitem.substring(enumtwoitem.indexOf(":") + 1);
              newenumarr.push(ss);
            });
            key.enumListTypeList = newenumarr;
          }
          return key;
        });
        // this.queryWeather();
        this.$refs.weatherDialog.traverList(this.weatherstation, 8);
      });
    },
    // 选择生长周期和批次查询环境数据和图片
    selectGrowthId(item) {
      this.growthPhaseNo = item.growthPhaseNo;
      // console.log(item)
      this.queryGrowth();
      // this.queryDataItem();
    },
    queryBatch() {
      this.loading = true;
      this.tableData = [];
      let params = {
        organizationNo: sessionStorage.organizationNo,
        farmingTypeNo: sessionStorage.farmingTypeNo,
        status: 0
      };
      nowpagereq.querybyname(params).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          let data = res.data || [];
          this.batchList = data;
          if (
            sessionStorage.organizationMark === "NBDL" &&
            this.batchList.length >= 8
          ) {
            if (this.batchList.length > 0) {
              this.batchNo = this.batchList[7]["batchNo"];
              this.changeBatch();
            }
          } else if (sessionStorage.organizationNo == "JiuGuan") {
            let index = this.batchList.findIndex(el => { return el.batchName == '田法林小麦' })
            index = index == -1 ? 0 : index
            this.batchNo = this.batchList[index]["batchNo"];
            this.changeBatch();
          } else {
            if (this.batchList.length > 0) {
              this.batchNo = this.batchList[0]["batchNo"];
              this.changeBatch();
            }
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // "生长模型", "当前状况"切换
    selectTabs(item) {
      this.activeTab = item;
      if (item === "生长模型") {
        setTimeout(() => {
          this.$refs.middleAll.queryGrowthPhaseByBatchId();
        }, 300);
      }
      if (item === "当前状况") {
        setTimeout(() => {
          this.$refs.middleNow.queryGrowthContent();
        }, 300);
      }
    },
    // 改变批次
    async changeBatch() {
      let index = this.batchList.findIndex(
        (item) => item.batchNo === this.batchNo
      );
      if (index !== -1) {
        this.batchInfo = this.batchList[index];
        this.varietyName = this.batchList[index]["varietyName"];
        this.varietyNo = this.batchList[index]["varietyNo"];
        this.batchNo = this.batchList[index]["batchNo"];
        this.nowDay = this.batchList[index]["nowDay"];
        this.queryAlarm(); // 暂时没有
        // this.queryDataItem();
        this.queryFacility();
        this.queryGrowth();
      }
      await this.queryGrowthPhaseIdByBatchId();
      await this.queryGrowthPhaseByBatchId();
    },

    // 该批次完整的生长周期
    async queryGrowthPhaseByBatchId() {
      if (this.batchNo) {
        await configurationApi
          .queryGrowthPhaseByBatchId({
            batchNo: this.batchNo
          })
          .then((res) => {
            if (res.code === 1) {
              let data = res.data || [];
              this.growthPhaseList = [];
              data.forEach((element) => {
                this.queryPicture(element).then((res) => {
                  this.$set(element, "imgurl", res);
                  // element.imgurl = res;
                  // this.growthPhaseList = [...this.growthPhaseList];
                  // console.log(element.growthPhaseNo, this.nowPhaseNo)

                  if (element.growthPhaseNo === this.nowPhaseNo) {
                    this.nowGrowthPhaseObject = element;
                    // console.log(element)
                  }
                });
              });
              this.growthPhaseList = data;
            }
          });
      } else {
        this.$message.error("请选择批次！");
      }
    },
    async queryPicture(data) {
      // console.log(data.pictureNo)
      return await configurationApi
        .queryPhasePicture(data.pictureNo)
        .then((res) => {
          if (res.code === 1) {
            let list = res.data || {};
            let imgurl = list.pictureData;
            return imgurl;
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    // 根据批次id获取当前生长阶段id
    async queryGrowthPhaseIdByBatchId() {
      if (this.batchNo) {
        await configurationApi.querySeedAnalysis(this.batchNo).then((res) => {
          this.waitingGrowth = false;
          if (res.code === 1) {
            let data = res.data || "";
            this.nowPhaseNo = data;
            // let index = this.growthPhaseList.findIndex(
            //   (item) => item.growthPhaseNo === data
            // );
            // if (index !== -1) {
            //   this.nowGrowthPhaseObject = this.growthPhaseList[index];
            // }
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        this.$message.error("请选择批次！");
      }
    },
    async queryFacility() {
      const { data: res } = await configurationApi.queryfindFacility(
        this.batchNo
      );
      this.$refs.dataItemDialog.queryFacilityData(res);
    },
    // 生长记录的图片
    queryGrowth() {
      let growthPictureList = [];
      if (this.batchNo && this.growthPhaseNo) {
        configurationApi
          .queryPictureByGrowthPhaseId({
            batchNo: this.batchNo,
            phaseNo: this.growthPhaseNo
          })
          .then((res) => {
            if (res.code === 1) {
              let data = res.data || [];
              growthPictureList = data;
              this.$refs.growthPictureDialog.getData(growthPictureList);
            } else {
              this.$message.error(res.msg);
            }
          });
      } else {
        this.$refs.growthPictureDialog.traverList(growthPictureList, 2);
      }
    },
    // // 气象数据项
    // queryWeatherByCondition() {
    //   configurationApi
    //     .queryWeatherByCondition({
    //       category: "weather",
    //       organizationId: sessionStorage.getItem("organizationId"),
    //     })
    //     .then((res) => {
    //       if (res.code === 1) {
    //         let data = res.data || [];
    //         this.queryWeather(data);
    //       } else {
    //         this.$message.error(res.msg);
    //       }
    //     });
    // },
    // 根据数据项查询最新数据
    queryWeather() {
      this.weatherList = [];
      if (this.weatherstation.length > 0) {
        var list = [];
        this.weatherstation.forEach((item) => {
          list.push(item.dataItemId);
        });
        configurationApi
          .queryListById({
            dataItemIdList: list
          })
          .then((res) => {
            if (res.code === 1) {
              let data = res.data || [];
              this.weatherList = data;
              this.weatherList.forEach((item) => {
                // 2*2=4
                if (
                  item.dataItemName === "天气现象" ||
                  item.dataItemName === "风向"
                ) {
                  this.weatherstation.forEach((a) => {
                    if (
                      item.dataItemName === "天气现象" &&
                      a.dataItemName === "天气现象"
                    ) {
                      let enumstr = a.enumListTypeList[item.lastValue1];
                      let enumstrtwo = enumstr;
                      item.enumVal = enumstrtwo;
                    } else if (
                      item.dataItemName === "风向" &&
                      a.dataItemName === "风向"
                    ) {
                      let enumstr = a.enumListTypeList[item.lastValue1];
                      let enumstrtwo = enumstr;
                      item.enumVal = enumstrtwo;
                    }
                  });
                }
              });
              this.$refs.weatherDialog.traverList(this.weatherList, 8);
            } else {
              this.$message.error(res.msg);
            }
          });
      }
    },
    // 环境预警数据
    queryAlarm() {
      // this.alarmList = [];
      // if (this.varietyNo) {
      //   // 查询已经添加的数据
      //   let params = {
      //     varietyNo: this.varietyNo,
      //     organizationId: sessionStorage.getItem("organizationId")
      //   };
      //   alarmConfigApi.queryByOrganizationIdAndType(params).then((res) => {
      //     if (res.code === 1) {
      //       let data = res.data || [];
      //       this.alarmList = data;
      this.$refs.alarmDialog.showAlarm(this.batchNo);
      //     } else {
      //       this.$message.error("查询失败");
      //     }
      //   });
      // } else {
      //   this.$message.error("请选择种养类型！");
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.all-con {
  height: 100%;
  width: 100%;
  display: flex;
  .left {
    flex: 1;
    margin: 0 10px 0 0;
    display: flex;
    flex-direction: column;
    > div {
      background-color: rgba(0, 57, 71, 1);
      box-shadow: 0px 0px 32px inset rgba(24, 140, 158, 0.8);
      // background-image: url("../../../assets/growthmodel/bac3.png");
      // background-repeat: no-repeat;

      &:nth-child(1) {
        flex: 1.6;
        margin: 0 0 10px;
      }
      &:nth-child(2) {
        flex: 1;
        margin: 0 0 10px;
      }
      &:nth-child(3) {
        flex: 1.2;
      }
    }
  }
  .middle {
    flex: 3.5;
    margin: 0 10px 0 0;
    // box-shadow: 0px 0px 32px inset rgba(24, 140, 158, 0.8);
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    > div {
      background-color: rgba(0, 57, 71, 1);
      box-shadow: 0px 0px 32px inset rgba(24, 140, 158, 0.8);
      &:nth-child(1) {
        flex: 1;
        margin: 0 0 10px;
      }
      &:nth-child(2) {
        flex: 2.5;
        margin: 0 0 10px;
      }
      &:nth-child(3) {
        flex: 1.9;
      }
    }
  }
}
.title-con {
  height: calc(100% - 36px);
  width: 100%;
  padding: 10px;
}

.middle {
  position: relative;
  .header-title {
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    background: url("~@/assets/conservation-model/header-title.png");
    background-size: 100% 100%;
    text-align: center;
    color: rgba(5, 235, 219, 1);
    letter-spacing: 6px;
    padding: 5px 0 0 0;
    font-size: 32px;
  }
  .growth-model {
    height: 66%;
    position: relative;
    margin-bottom: 3%;
  }
  > div {
    &:nth-child(4) {
      height: 30%;
      padding: 10px;
    }
  }
  .bacth-info {
    position: absolute;
    z-index: 99;
    top: 9%;
    left: 4%;
    background: url("~@/assets/conservation-model/batchbox.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    > p {
      font-size: 15px;
      margin: 5px 40px 8px 25px;
      color: rgba(5, 235, 219, 1);
      padding: 0 0 0 10px;
      border-left: 1px solid rgba(5, 235, 219, 1);
    }
  }
}
.tabs-box {
  position: absolute;
  top: 8%;
  left: calc(50% - 140px);
  height: 40px;
  display: flex;
  cursor: pointer;
  z-index: 2;
}
.tabs {
  height: 100%;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  // background: url("~@/assets/conservation-model/change-btn.png");
  box-shadow: inset 0px 0px 15px 1px #05ebdb90;
    // background: #2C2000;
  opacity: 1;
  border: 1px solid #05ebdb;
  border-radius: 5px;
  background-size: 100% 100%;
  color: rgba(5, 235, 219, 1);
  font-size: 16px;
  margin: 0 10px;
  &:hover {
    // background: url("~@/assets/conservation-model/change-btn-active.png");
    background: #2C2000;
    box-shadow: inset 0px 0px 15px 1px #f0b82490;
    opacity: 1;
    color: #f0b824;
    border: 1px solid #f0b824;
    background-size: 100% 100%;
    font-weight: 700;
  }
}
.tabActive {
  box-shadow: inset 0px 0px 15px 1px #f0b82490;
    background: #2C2000;
  color: #f0b824;
  border-radius: 5px;
  opacity: 1;
  border: 1px solid #f0b824;
  // background: url("~@/assets/conservation-model/change-btn-active.png");
  background-size: 100% 100%;
  font-weight: 700;
}

::v-deep .el-input__inner {
  font-weight: 600;
  background: linear-gradient(
    180deg,
    rgba(5, 235, 219, 1) 0%,
    rgba(3, 133, 124, 1) 100%
  );
  color: #fff;
  border-color: rgba(3, 133, 124, 1);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: rgba(3, 133, 124, 1);
  font-weight: 600;
}
::v-deep {
  /* 下拉框小三角的样式  小三角朝上就是：border-bottom-color  小三角朝下border-top-color */
  .el-icon-arrow-up {
    &::before {
      color: #fff;
      content: "\e78f";
    }
  }
  .el-select .el-input.is-focus .el-input__suffix {
    .el-input__suffix-inner {
      .el-input__icon {
        &::before {
          content: \e790;
        }
      }
    }
  }
  // \
}
</style>
